<template>
    <a-modal v-model="visible" :title="title" width="800px" @ok="handleSubmit">
        <a-row>
            <a-col span="11">
                <a-form-item :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol" label="年度">
                    <a-input disabled :value="currentAccount.accountYear || ''" placeholder="请选择年度"></a-input>
                </a-form-item>
            </a-col>
            <a-col span="2"></a-col>
            <a-col span="11">
                <a-form-item :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol" label="期间个数">
                    <a-input disabled :value="12" placeholder="请选择期间个数"></a-input>
                </a-form-item>
            </a-col>
            <a-col span="11">
                <a-form-item :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol" label="年度开始日期">
                    <!-- <a-input placeholder="请选择年度"></a-input> -->
                    <a-date-picker disabled style="width:100%" :value="currentAccount.beginDate || ''" format="YYYY-MM-DD" placeholder="选择日期" />
                </a-form-item>
            </a-col>
            <a-col span="2"></a-col>
            <a-col span="11">
                <a-form-item :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol" label="年度截止日期">
                    <!-- <a-input placeholder="请选择期间个数"></a-input> -->
                    <a-date-picker disabled style="width:100%" :value="currentAccount.endDate || ''" format="YYYY-MM-DD" placeholder="选择日期" />
                </a-form-item>
            </a-col>
        </a-row>

        <a-table class="a-base-table" :columns="columns" :data-source="currentAccounting" :pagination="false" bordered>
            <template slot="endDate" slot-scope="row,list,index">
                <a-date-picker v-if="disabledPick(row) " class="w100" :allowClear="false" :value="row.endDate" @change="(m,v)=>dateChange(row,m,v,index)" :disabled-date="(date)=>disabledDate(date,index)" />
                <span v-else>{{row.endDate}} </span>
            </template>
        </a-table>
    </a-modal>
</template>
<script>
import { postAction } from "@/api/manage";
import { save as savePeriod } from "@/api/erp/period";
export default {
    data() {
        const currentMonthStartDay = moment().startOf("month");
        const yearStartDay = moment().month(0).startOf("month");
        const yearEndDay = moment().month(11).endOf("month");
        return {
            currentAccount: {},            //当前账套信息
            currentAccounting: {},         //当前会计期间
            formItemLayout: {
                labelCol: { span: 8 },
                wrapperCol: { span: 16 }
            },
            endDate: '',
            visible: false,
            title: "",
            isFirstYear: true,
            yearStartDay,
            yearEndDay,
            currentMonthStartDay,                         //当前月份的第一天
            columns: [
                {
                    title: "期间",
                    width: 40,
                    align:'center',
                    dataIndex: "currentPeriod"
                },
                {
                    title: "起始日期",
                    width: 140,
                    align:'center',
                    dataIndex: "beginDate"
                },
                {
                    title: "结束日期",
                    width: 140,
                    align:'center',
                    scopedSlots: { customRender: "endDate" }
                }
            ]
        };
    },
    computed: {},
    methods: {
        onDateChange(value, dateString) {
            console.log(dateString)
        },
        dateChange(row, m, lastMonthEndDateStr, index) {
            row.endDate = m.format("YYYY-MM-DD");
            this.dateChangeLoop(m, lastMonthEndDateStr, index);
        },
        dateChangeLoop(m, lastMonthEndDateStr, index) {
            const { accountYear } = this.currentAccount;
            if (index > 10) return false;
            let nextDate = this.currentAccounting[index + 1];
            console.log("nextDate:", nextDate)
            if (nextDate) {
                nextDate.beginDate = moment(lastMonthEndDateStr).add(1, "days").format("YYYY-MM-DD");
                if (index < 10) {
                    let date = m.date();
                    let endDate = moment(nextDate.endDate).date(date);
                    let endOfMonth = moment().year(accountYear).month(nextDate.currentPeriod - 1).endOf("month");
                    console.log(endDate.format("YYYY-MM-DD"), endOfMonth.format("YYYY-MM-DD"));
                    if (endDate > endOfMonth) {
                        endDate = endOfMonth;
                    }
                    nextDate.endDate = endDate.format("YYYY-MM-DD");
                    console.log("dateChange:", nextDate)
                    this.dateChangeLoop(m, endDate, index + 1);
                }
            }
        },
        disabledPick(row) {
            const { currentMonthStartDay } = this;
            const { enableDuration, isFirstYear } = this.currentAccount;
            let a = row.currentPeriod == 12;                  //是否 是12月
            let b = currentMonthStartDay > moment(row.endDate);
            let c = isFirstYear ? (enableDuration > row.currentPeriod) : b;
            return !(a || c);
        },
        disabledDate(current, i = 0) {
            const { accountYear } = this.currentAccount;
            let a1 = moment().year(accountYear).month(i).date(19);
            let b1 = moment().year(accountYear).month(i).endOf("month");
            let a = current < a1;
            let b = current > b1;
            return a || b;
        },
        handleSubmit() {
            this.form.validateFieldsAndScroll((err, values) => {
                console.log();
                if (!err) {
                    const { id } = this.currentAccount;
                    let postData = {
                        erpPeriodDtos: this.currentAccounting,
                        accountId: id,
                    }
                    savePeriod(postData).then(res => {
                        if (res.code == 200) {
                            this.$message.success('保存成功');
                            this.visible = false;
                            this.$emit("ok");
                        } else {
                            // this.$message.warning(res.message);
                        }
                    });
                }
            });
        },
        add() {
            let { accountYear } = this.currentAccount;
            let PeriodList = [];
            this.visible = true;
            for (let i = 0; i < 12; i++) {
                PeriodList.push(
                    {
                        currentPeriod: i + 1,     //会计期间-月份
                        beginDate: moment().year(accountYear).month(i).startOf("month").format("YYYY-MM-DD"),  //期间 开始日期
                        endDate: moment().year(accountYear).month(i).endOf("month").format("YYYY-MM-DD"),      //期间 结束日期
                        currentYear: accountYear      //会计期间-年份
                    }
                )
            }

            this.currentAccounting = PeriodList;
            console.log("PeriodList:", PeriodList);
            console.log(this.currentAccounting);
        },
        edit(record) {
            console.log("this.currentAccount:", this.currentAccount);
            this.visible = true;
            this.currentAccounting = record;
        }

    },
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: "DataSourceEditForm" });
    }
};
</script>